<template>
	<div>
		<el-form ref="loginForm" 
				v-loading="loading"
				element-loading-text="正在登录......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				:rules="rules" 
				:model="LoginForm" 
				class="loginContainer">
			<h3 class="loginTitle">系统登录</h3>
			<el-form-item prop="username">
				<el-input type="text" auto-complete="false" v-model="LoginForm.username" placeholder="请输入用户名">
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" auto-complete="false" v-model="LoginForm.password" placeholder="请输入密码">
				</el-input>
			</el-form-item>
			<el-form-item prop="code">
				<el-input style="width: 250px;margin-right: 5px;" type="text" auto-complete="false"
					v-model="LoginForm.code" placeholder="点击图片更换验证码"></el-input>
				<img :src="captchaUrl" @click="updateCaptcha">
			</el-form-item>
			<el-checkbox class="loginRemember" v-model="checked">记住我</el-checkbox>
			<el-button type="primary" style="width: 100%;" @click="submitLogin('loginForm')">登录</el-button>
		</el-form>
		
		<el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%">
		  <span>请输入完整信息</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				captchaUrl: '/captcha?time='+new Date(),
				LoginForm: {
					username: '',
					password: '',
					code: ''
				},
				rules:{
					username: [{required:true,message:'请输入用户名',trigger:'blur'}],
					password: [{required:true,message:'请输入密码',trigger:'blur'}],
					code: [{required:true,message:'请输入验证码',trigger:'blur'}]
				},
				checked: true,
				//对话框显示和隐藏
				dialogVisible: false,
				loading: false
			}
		},
		methods:{
			submitLogin(formName){
				this.$refs[formName].validate((valid)=>{
					if(valid){//校验通过
						this.loading = true;
						this.postRequest('/login',this.LoginForm).then(response=>{
							this.loading = false;
							if (response) {
								const tokenStr = response.object.tokenHead+response.object.token;
								window.sessionStorage.setItem('tokenStr',tokenStr);
								//跳转首页
								let path = this.$route.query.redirect;
								this.$router.replace(path=='/'||path==undefined?'/home':path);
							}
						});
					}else{
						this.dialogVisible = true;
						return false;
					}
				});
			},
			updateCaptcha(){
				this.captchaUrl="/captcha?time="+new Date();
			}
		}
	}
</script>

<style>
	.loginContainer {
		border-radius: 15px;
		background-clip: padding-box;
		margin: 120px auto;
		width: 350px;
		padding: 15px 35px;
		background-color: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
	}

	.loginTitle {
		text-align: center;
		margin: 0px auto 40px auto;
	}
	
	.loginRemember{
		text-align: left;
		margin: 0 0 15px 0;
	}
	
	.el-form-item__content{
		display: flex;
		align-items: center;
	}
</style>
